<template>
  <div class="">
    <div class="taskTitleThen">
     {{userInfo.majors.title}}
    </div>
    <!-- 筛选 -->
    <!-- <div class="screen">
      <div class="inScreen">
        <div class="myScreen">
          筛选
        </div>
        <div class="">
          <el-radio-group v-model="radio">
            <el-radio :label="3">全部</el-radio>
            <el-radio :label="6">已完成</el-radio>
            <el-radio :label="9">未完成</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div> -->
    <!-- end -->
    <!--    软件下载弹出层-->
    <div>
      <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogVisible"
        title="请下载客户端进行考试"
        width="30%">
        <div style="display: flex;">
          <div style="padding: 10px 0">
            <span style="white-space: nowrap">说明：</span>
          </div>
          <div style="display: flex;flex-direction: column;" class="DiaLog">
            <span>1.在线考试客户端仅支持在windows操作系统(win7、 win710)下运行。</span>
            <span>2.本考试需要终端具备30万像素以上的摄像头，用以进行人脸识别验证。</span>
            <span>3.考试环境应保证光线适中，请不要在逆光环境下进行。因设备和光线问题导致人脸图像识别不通过的，后果自负。</span>
            <span>4.人脸识时过程请务必保持人脸正面全部处于摄像头画面中心位置并确保人脸图像占比不小于画面的1/4。考试过程中,务必确保只有考生本人影像在摄像头画面内。</span>
            <span>5.首次进入考试环境时，请根据系统提示下载并安装考试客户端程序。</span>
            <span>6.每门考试答卷完成后务必点击右下角“交卷”进行交卷拍照验证方可退出考试。</span>
            <span>7.如需帮助请致电学生服务热线。</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 内容部分 -->
    <div class="theInfo">
      <div v-for="(item,index) in ExamS" :key="index" class="selectWork" @click="tuchExam">
        <div class="detialLeft">
          考试
        </div>
        <div class="detialRight">
          <div class="homworkname">
            <div class="">
              {{ item.title }}
            </div>
            <div class="statusIn">
              {{ item.UserExam ? item.UserExam.status == true ? '已完成' : '未完成' : '' }}
            </div>
          </div>
          <div class="myData">
            {{ item.start_time }}-{{ item.end_time }}
          </div>

        </div>
      </div>
    </div>
    <!-- end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      radio: 3,
      ExamS: [],
			userInfo: {}
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },

    tuchExam() {
      this.dialogVisible = true
      // this.$router.push('examListContent')
    },

    getExam() {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.testCatalog/index', {
        website_id: 1,
        idcard: JSON.parse(sessionStorage.getItem('InfoMation')).idcard,
        pattern: 1
      }).then(res => {
        this.ExamS = res.data.data.exam
      }).catch(err => {
        console.log(err);
      })
    }
  },
  created() {
    this.getExam()
		this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
  }
}
</script>

<style>
.DiaLog span{
  margin: 10px 0;
}
.myData {
  color: #b2aab3;
}

.statusIn {
  color: #b8a29b;
}

.homworkname {
  cursor: pointer;
  height: 48px;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detialRight {
  margin-left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #eaeaea;
  width: 100%;
}

.selectWork {
  padding: 0 24px;
  display: flex;
  align-items: center;
}

.selectWork:hover {
  background-color: #f7fafc;
}

.detialLeft {
  border-radius: 4px;
  color: #FFFFFF;
  width: 50px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c4c9cc;
}

.theInfo {
  margin-top: 16px;
}

.myScreen {
  margin-right: 24px;
  color: #9a9aa3;
  letter-spacing: 2pt;
}

.inScreen {
  display: flex;
}

.screen {
  padding: 16px 24px;
}

.taskTitleThen {
  padding: 0 24px 16px 24px;
  border-bottom: solid 1px #eaeaea;
}
</style>
